<template>
  <div id="searchView" v-loading="$store.state.loading">
    <div class="back">
      <div class="back-content right-content" @click="$router.back()">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
      <div class="back-title">搜索词语：{{ $route.params.searchText }}</div>
    </div>
    <div v-if="!$store.state.loading">
      <ul class="artical-list" v-if="blogList && blogList.length">
        <li class="artical-content" v-for="item in blogList" :key="item">
          <ArticalItem :item="item" type="search"></ArticalItem>
        </li>
      </ul>
      <div v-else>
        <el-empty description="暂无博客..."></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import ArticalItem from '@/components/Artical/artical-item.vue'

export default {
  components: {
    ArticalItem
  },
  data() {
    return {
      blogList: []
    }
  },
  created() {
    this.getBlog()
  },
  methods: {
    getBlog() {
      this.$store.commit('setLoading', true)
      this.$api
        .getBlogSearch({ search: this.$route.params.searchText })
        .then((res) => {
          if (res.code === 1) {
            this.blogList = res.data
          }
        })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('setLoading', false)
          }, 300)
        })
    }
  },
  watch: {
    $route() {
      this.getBlog()
    }
  }
}
</script>

<style lang="less" scoped>
#searchView {
  padding: 20px;
}
</style>